<template>
  <div class="app-container home">
    <div class="top">
      <div class="platformStatistics header">
        <div class="Statistics">
          <img src="../assets/index/Frame 275.png" style="width: 24px;height: 24px;" alt="" srcset="">
          平台总用户量：{{ TotalStatic.totalClients }}人
          <!-- ，客单价{{ TotalStatic.CustomerUnitPrice }}元，客单成本价{{ TotalStatic.CustomerOrderCost }}元 -->
        </div>
        <div class="col-item">全部技师{{ TotalStatic.totalTechCount }}人，当日可服务技师{{ TotalStatic.todayTotalTechCount }}人</div>
      </div>
      <div class="StatisticsGird">
        <div class="numtitle grid">
          <div class="numtitle-item">总营业额</div>
          <div class="numtitle-item">总现金流水</div>
          <div class="numtitle-item">订单数</div>
          <div class="numtitle-item">服务项目数</div>
          <div class="numtitle-item">客户量</div>
          <div class="numtitle-item">充值收益</div>
          <div class="numtitle-item">会员卡收益</div>
          <div class="numtitle-item">小程序订单量</div>
        </div>
        <div class="numvalue grid">
          <div class="numvalue-item">{{ TotalStatic.totalTurnover }}</div>
          <div class="numvalue-item">{{ TotalStatic.totalCashFlow }}</div>
          <div class="numvalue-item">{{ TotalStatic.totalOrderCount }}</div>
          <div class="numvalue-item">{{ TotalStatic.serviceItemCount }}</div>
          <div class="numvalue-item">{{ TotalStatic.totalClients }}</div>
          <div class="numvalue-item">{{ TotalStatic.valueCardRechargeAmount }}</div>
          <div class="numvalue-item">{{ TotalStatic.memberCardTotalAmount }}</div>
          <div class="numvalue-item">{{ TotalStatic.itemMinProTotalCount }}</div>
        </div>
      </div>
      <div class="filter header">
        <div class="filterStord">
          区域：
          <el-select clearable v-model="queryParams.regionId" @change="regionChange" size="small">
            <el-option v-for="(item, index) of regionOption" :key="index" :label="item.label" :value="item.value">{{
              item.label }}
            </el-option>
          </el-select>
          门店：
          <el-select clearable v-model="queryParams.storeId" @change="storeIdChange" size="small">
            <el-option v-for="(item, index) of storeOption" :key="index" :label="item.label" :value="item.value">{{
              item.label }}
            </el-option>
          </el-select>
        </div>
        <div class="filterTime">
          时间：
          <el-date-picker v-model="time" style="width: 240px" :picker-options="pickerOptions" value-format="yyyy-MM-dd"
            type="daterange" @change="getTime" range-separator="-" start-placeholder="开始日期"
            end-placeholder="结束日期"></el-date-picker>
        </div>
      </div>
    </div>

    <div class="content">
      <div class="box">
        <div class="box_item">
          <div class="box_item_content">
            <div class="header">
              <div class="flex"> 
                <img src="../assets/index/Frame 275 (1).png" style="width: 24px;height: 24px;" alt="" srcset="">
                营业额趋势图 
              </div>
              <div class="getMore"></div>
            </div>
            <div class="item_content">
              <div class="chart box_item_content" ref="turnover"></div>
            </div>
          </div>
        </div>
        <div class="project">
          <div class="flex box_item ">
            <div class="box_item_content">
              <div class="header">
                <div class="flex">
                  <img src="../assets/index/Frame 275 (2).png" style="width: 24px;height: 24px;" alt="" srcset="">
                  热门项目
                </div>
                <div class="getMore">查看更多</div>
              </div>
              <div class="item_content">
                <div v-for="(item, i) in PopularProjectArr" :key="i" class="i">{{ i + 1 }}、{{ item.itemName }}
                  &nbsp;&nbsp;
                  {{ item.serviceCount }}<span style="font-size: 12px;" v-if="item.serviceCount">次</span></div>
              </div>
            </div>
          </div>
          <div class="flex box_item">
            <div class="box_item_content StayTuned">
              敬请期待
            </div>
          </div>
        </div>
        <div class="box_item">
          <div class="box_item_content">
            <div class="header">
              <div class="flex">
                <img src="../assets/index/Frame 275 (4).png" style="width: 24px;height: 24px;" alt="" srcset="">
                技师统计
              </div>
              <div class="getMore">查看更多</div>
            </div>
            <el-table :data="TechnicianWageList" style="width: 100%;margin-top: 8px;"
              :header-cell-style="headerCellStyle" height="250">
              <el-table-column align="center" prop="jobNumber" label="工号">
              </el-table-column>
              <el-table-column align="center" prop="belongAreaName" label="区域">
              </el-table-column>
              <el-table-column align="center" prop="belongStoreName" label="门店">
              </el-table-column>
              <el-table-column align="center" prop="name" label="技师姓名">
              </el-table-column>
              <el-table-column align="center" label="累计收益">
                <template slot-scope="scope">
                  {{
                    (Number(scope.row.itemEarnings) +
                    Number(scope.row.memberEarnings) +
                    Number(scope.row.valueEarnings)+
                    Number(scope.row.productEarnings)+
                    Number(scope.row.compartmentEarnings)).toFixed(2)
                  }}
                </template>
              </el-table-column>
              <el-table-column align="center" prop="itemEarnings" label="技师项目收益" width="120">
              </el-table-column>
              <el-table-column align="center" prop="memberEarnings" label="会员卡收益">
              </el-table-column>
              <el-table-column align="center" prop="valueEarnings" label="储值卡收益">
              </el-table-column>
              <el-table-column align="center" prop="productEarnings" label="附加商品收益" width="120">
              </el-table-column>
              <el-table-column align="center" prop="compartmentEarnings" label="包间收益">
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
      <div class="box">
        <div class="box_item">
          <div class="header">
            <div class="flex">
              <img src="../assets/index/Frame 275 (3).png" style="width: 24px;height: 24px;" alt="" srcset="">
              小程序趋势图
            </div>
            <div class="getMore"></div>
          </div>
          <div class="item_content">
            <div class="chart box_item_content" ref="activityTrend"></div>
          </div>
        </div>
        <div class="project">
          <div class="box_item flex">
            <div class=" box_item_content StayTuned">
              敬请期待
            </div>
          </div>
          <div class="box_item flex">
            <div class=" box_item_content StayTuned">
              敬请期待
            </div>
          </div>
        </div>
        <div class="project">
          <div class="box_item flex">
            <div class="box_item_content">
              <div class="header">
                <div class="flex">
                  <img src="../assets/index/Frame 275 (5).png" style="width: 24px;height: 24px;" alt="" srcset="">
                  储值卡收益排名
                </div>
                <div class="getMore">查看更多</div>
              </div>
              <el-table :data="storeTableData" style="width: 100%;margin-top: 8px;" :header-cell-style="headerCellStyle"
                height="250">
                <el-table-column prop="regionName" label="归属区域">
                </el-table-column>
                <el-table-column prop="storeName" label="归属门店">
                </el-table-column>
                <el-table-column prop="totalStoredCardSaleAmount" label="储值卡销售总额">
                </el-table-column>
              </el-table>
            </div>
          </div>
          <div class="box_item flex">
            <div class="box_item_content">
              <div class="header">
                <div class="flex">
                  <img src="../assets/index/Frame 275 (6).png" style="width: 24px;height: 24px;" alt="" srcset="">
                  会员卡收益排名
                </div>
                <div class="getMore">查看更多</div>
              </div>
              <el-table :data="memberTableData" style="width: 100%;margin-top: 8px;"
                :header-cell-style="headerCellStyle" height="250">
                <el-table-column prop="regionName" label="归属区域">
                </el-table-column>
                <el-table-column prop="storeName" label="归属门店">
                </el-table-column>
                <el-table-column prop="totalSalesAmount" label="会员卡销售总额">
                </el-table-column>
              </el-table>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import { indexTotalStatic, revenueTrend, dailyActivityTrend, PopularProjectStatic, technicianWageList, storedCardReport, salesCardReport } from "@/api/index.js";
import { fetchRegionList, fetchStoreList } from "@/api/system/orderList/order";
export default {
  name: "Index",
  data() {
    return {
      // 版本号
      version: "3.8.7",
      pickerOptions: {
        shortcuts: [
          {
            text: "今日",
            onClick(picker) {
              picker.$emit("pick", [new Date(), new Date()]);
            },
          },
          {
            text: "昨日",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 2);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 8);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "近一月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setMonth(start.getMonth() - 1); // 设置开始时间为上月同一天
              start.setDate(end.getDate()); // 确保开始时间和结束时间在同一天
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      time: [],
      value: "",
      myChart: "",
      myChart1: "",
      regionOption: [], // 区域下拉框
      storeOption: [], // 门店下拉框
      queryParams: { // 查询参数
        regionId: "", // 区域id
        storeId: "", // 门店id
        startTime: "", // 开始时间
        endTime: "",// 结束时间
        pageNum: 1, // 页码
        pageSize: 10, // 每页条数
      },
      TotalStatic: {},
      storeTableData: [],
      memberTableData: [],
      PopularProjectArr: [], // 热门项目
      TechnicianWageList: [], // 技师工资
    };
  },
  mounted() {
    this.getIndexTotalStatic()
    this.getRegionOption()
    this.getPopularProjectStatic()
    this.getTurnoverChart()
    this.getActivityTrendChart()
    this.getTechnicianWageList()
    this.getStoreCardReport()
    this.getSalesCardReport()
  },
  methods: {
    getTime() {
      if (this.time.length) {
        this.queryParams.startTime = this.time[0];
        this.queryParams.endTime = this.time[1];
      } else {
        this.queryParams.startTime = null;
        this.queryParams.endTime = null;
      }
      this.storeIdChange()
    },
    getTurnoverChart() {
      this.myChart = echarts.init(this.$refs.turnover)
      revenueTrend(this.queryParams).then((res) => {
        let option = {
          color: ['#1e7dff'],
          // title: {
          //   text: '营业额趋势图',
          //   fontSize: 16,
          // },
          tooltip: {
            trigger: 'axis'
          },
          grid: {
            left: '2%',
            right: '2%',
            bottom: '3%',
            top: '8%',
            containLabel: true
          }, //图表大小位置
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: res.rows.map((item) => item['trendTime'].replaceAll('-', '/'))
          },
          yAxis: {
            type: 'value',
          },
          series: [
            {
              data: res.rows.map((item) => item['trendCount']),
              type: 'line'
            }
          ]
        };
        //跟随窗口大小echart图表自适应
        this.myChart.clear()
        this.myChart.setOption(option)
        window.addEventListener('resize', () => {
          this.myChart.resize()
        });
      })
    },
    getActivityTrendChart() {
      this.myChart1 = echarts.init(this.$refs.activityTrend)
      dailyActivityTrend(this.queryParams).then((res) => {
        let option = {
          color: ['#1e7dff'],
          // title: {
          //   text: '小程序日活趋势图',
          //   fontSize: 16,
          // },
          tooltip: {
            trigger: 'axis'
          },
          grid: {
            left: '2%',
            right: '2%',
            bottom: '3%',
            top: '8%',
            containLabel: true
          }, //图表大小位置
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: res.rows.map((item) => item['trendTime'].replaceAll('-', '/'))
          },
          yAxis: {
            type: 'value',
          },
          series: [
            {
              data: res.rows.map((item) => item['trendCount']),
              type: 'line'
            }
          ]
        };
        //跟随窗口大小echart图表自适应
        this.myChart1.clear()
        this.myChart1.setOption(option)
        window.addEventListener('resize', () => {
          this.myChart1.resize()
        });
      })
    },
    // 获取平台总用户量、客单价、客单成本价等数据
    getIndexTotalStatic() {
      indexTotalStatic().then((res) => {
        this.TotalStatic = res.data
      })
    },
    // 获取归属区域下拉数据
    getRegionOption() {
      fetchRegionList().then((res) => {
        this.regionOption = res.data.map((rItem) => {
          return {
            value: rItem.id,
            label: rItem.regionName,
          };
        });
      });
    },
    // 归属区域切换
    regionChange(value) {
      // const selectedOption = this.regionOption.find(
      //   (item) => item.value === value
      // );
      // this.regionId = value;
      // this.regionName = selectedOption.label;
      if (value) {
        this.queryParams.storeId = "";
      }
      fetchStoreList({ regionId: value }).then((res) => {
        this.storeOption = res.data.map((rItem) => {
          return {
            label: rItem.storeName,
            value: rItem.id,
          };
        });
      });
    },
    // 归属门店切换
    storeIdChange(value) {
      // const selectedOption = this.storeOption.find(
      //   (item) => item.value === value
      // );
      // console.log("selectedOption", selectedOption, value, this.storeOption);
      // this.storeId = value;
      // this.queryParams.storeId = value;
      // this.storeName = selectedOption.label;
      this.getPopularProjectStatic()
      this.getTurnoverChart()
      this.getActivityTrendChart()
      this.getTechnicianWageList()
      this.getStoreCardReport()
      this.getSalesCardReport()
    },
    // 获取热门项目
    getPopularProjectStatic() {
      PopularProjectStatic(this.queryParams).then((res) => {
        console.log(res, 'res');
        this.PopularProjectArr = res.rows
      })
    },
    //技师工资
    getTechnicianWageList() {
      this.queryParams.belongStoreId= this.queryParams.storeId;
      this.queryParams.belongAreaId= this.queryParams.regionId;
      technicianWageList(this.queryParams).then((res) => {
        console.log(res, 'res');
        this.TechnicianWageList = res.rows
      })
    },
    // 门店卡排名
    getStoreCardReport() {
      storedCardReport(this.queryParams).then((res) => {
        console.log(res, 'res');
        this.storeTableData = res.rows
      })
    },
    // 会员卡排名
    getSalesCardReport() {
      salesCardReport(this.queryParams).then((res) => {
        console.log(res, 'res');
        this.memberTableData = res.rows
      })
    },
    headerCellStyle({ row, column, rowIndex, columnIndex }) {
      return {
        'background-color': '#d2e5ff', /* 你想要的表头背景颜色 */
        color: '#333',/* 你想要的表头文字颜色 */
        fontWeight: 300
      };
    }
  },
};
</script>

<style scoped lang="scss">
.home {
  background-color: #f0f2f5;
  width: 100%;

  .top {
    background-color: #fff;
    padding: 15px;
    box-sizing: border-box;
    border-radius: 5px;
    margin-bottom: 15px;
  }

  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 16px;
    color: #333;
    background-color: #fff;

    .flex {
      display: flex;
      align-items: center;
    }

    img {
      margin-right: 7px;
    }

    .Statistics {
      display: flex;
      align-items: center;
    }
  }

  .StatisticsGird {
    padding: 12px 0;
    color: #333;
    background-color: #fff;

    .numtitle {
      background-color: #d2e5ff;
      font-size: 16px;
      padding: 8px 0;
    }

    .numvalue {
      font-size: 14px;
      padding: 8px 0;
      background-color: #fafafa;
    }

    .grid {
      display: grid;
      grid-template-columns: repeat(8, 1fr);
      grid-template-rows: 1fr;
      grid-gap: 10px;
      text-align: center;
      font-size: 14px;
    }
  }

  .content {
    display: flex;
    justify-content: space-between;
    color: #333;
    font-size: 15px;

    .box {
      width: calc(50% - 5px);

      .box_item {
        background-color: #fff;
        margin-bottom: 15px;
        padding: 15px;
        box-sizing: border-box;
        border-radius: 5px;
        ;

        .box_item_content {
          width: 100%;
          // background-color: #ffffff;
          // padding: 10px;
        }

        .item_content {
          color: #333;
          font-size: 14px;
          padding: 10px 0;

          .i {
            padding-top: 4px;
          }
        }

        .StayTuned {
          width: 100%;
          height: 280px;
          display: flex;
          justify-content: center;
          align-items: center;
          color: #aaa;
          font-size: 14px;
        }

        .chart {
          width: 100%;
          height: 260px;
        }
      }

      .getMore {
        cursor: pointer;
        color: #aaa;
        font-size: 13px;
        display: flex;
        align-items: center;
      }

      .project {
        display: flex;
        justify-content: space-between;

        .flex {
          width: calc(50% - 8px);
        }
      }

    }

  }
}
</style>
